<template>
  <div>
 <div>姓名：{{ name }}</div>
<div>年龄：{{ age }}</div>
<div>地址：{{ address }}</div>
<button @click="changeName">改变姓名</button>
<button @click="changeAge">年龄+1</button>
<button @click="showTel">展示电话</button>
  </div>
</template>
<!-- 方法一：改在浏览器Vue组件中显示的名字 -->
<!-- <script lang="ts">
export default {
  name: 'Person234'
}
</script> -->
<!-- 方法二 -->
<script lang="ts" setup name="Person234">
  let name = '张三'  //此时的name不是响应式数据
  let age = 18
  let address = '银河'
  let tel = '123456'
  function changeName(){
    name = '王五'
    console.log(name);
    
  }
  function changeAge(){
    age +=1
    console.log(age);
    
  }
  function showTel(){
    alert(tel)
    console.log('123456')
  }
</script>
<style>

</style>